<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>第一步：搭架子</title>
        <script type="text/javascript" src="./threejs/three.js"></script>
        <link rel="stylesheet" href="./reset.import.css">
        <style type="text/css">
            div#canvas-frame {
                cursor: pointer;
                width:100%;
                height:100%;
                background-color: #EEEEEE;
            }
        </style>
    </head>
    <body onload="threeStart();">
        <div id="canvas-frame"></div>
        <script>
            var renderer;//渲染器
            var width;//页面宽度
            var height;//页面高度
            var origPoint = new THREE.Vector3(0, 0, 0);//原点

            window.requestAnimFrame = (function() {//如果有变化则可能还需要requestAnimationFrame刷新
                return window.requestAnimationFrame ||
                       window.mozRequestAnimationFrame ||
                       window.webkitRequestAnimationFrame ||
                       window.msRequestAnimationFrame ||
                       window.webkitRequestAnimationFrame;
            })();

            //开始
            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                render();
            }

            //根据页面宽度和高度创建渲染器，并添加容器中
            function initThree() {
                width = window.innerWidth;
                height = window.innerHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                    // 平滑;
                });
                renderer.setSize(width, height);
                renderer.setClearColor(0xFFFFFF, 1.0);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
            }

            //创建相机，并设置正方向和中心点
            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
                camera.position.set(200, 400, 600);
                camera.up.set(0, 1, 0);//正方向
                camera.lookAt(origPoint);
            }

            //创建场景，后续元素需要加入到场景中才会显示出来
            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }

            //创建光线
            var light;
            function initLight() {
            	light = new THREE.AmbientLight(0xfefefe);
				scene.add(light);
            }

            //创建展示场景所需的各种元素
            var cubes
            function initObject() {
                //坐标轴
                var xmat = new THREE.LineBasicMaterial({ color: 0xff0000 });
                var xgeo = new THREE.Geometry();
                // 几何学
                // http://www.yanhuangxueyuan.com/doc/three.js/vector3.html
                xgeo.vertices.push(
                        new THREE.Vector3(0, 0, 0),
                        new THREE.Vector3(300, 0, 0)
                );
                var xline = new THREE.Line(xgeo, xmat);
                scene.add(xline);

                var ymat = new THREE.LineBasicMaterial({ color: 0x00ff00 });
                var ygeo = new THREE.Geometry();
                ygeo.vertices.push(
                        new THREE.Vector3(0, 0, 0),
                        new THREE.Vector3(0, 300, 0)
                );
                var yline = new THREE.Line(ygeo, ymat);
                scene.add(yline);

                var zmat = new THREE.LineBasicMaterial({ color: 0x0000ff });
                var zgeo = new THREE.Geometry();
                zgeo.vertices.push(
                        new THREE.Vector3(0, 0, 0),
                        new THREE.Vector3(0, 0, 300)
                );
                var zline = new THREE.Line(zgeo, zmat);
                scene.add(zline);
            }

            //渲染
            function render(){
                renderer.clear();
                renderer.render(scene, camera);
                window.requestAnimFrame(render);
            }
        </script>
    </body>
</html>